<template>
	<view class="content">
		<view class="helmet">
			<view class="devices">
				<view class="dev_referral">
					<view class="ref_item">
						<view class="">
							<image class="maxiconSize" src="@/static/device/zhoushitu.svg" mode=""></image>
						</view>
						<view class="item_tle">
							周视图
						</view>
					</view>
					<view class="ref_item" @click="changeMode">
						<view class="">
							<image class="maxiconSize" src="@/static/device/month.svg" mode=""></image>
						</view>
						<view class="item_tle">
							月视图
						</view>
					</view>
					<view class="ref_item">
						<view class="">
							<image class="maxiconSize" src="@/static/device/rili.svg" mode=""></image>
						</view>
						<view class="item_tle">
							年视图
						</view>
					</view>
					<view class="ref_item">
						<view class="">
							<image class="maxiconSize" src="@/static/device/sousuo.svg" mode=""></image>
						</view>
						<view class="item_tle">
							搜索
						</view>
					</view>
					<view class="ref_line">

					</view>
					<view class="ref_item" @click="showMore = true">
						<view class="">
							<image class="maxiconSize" src="@/static/device/gengduo.svg" mode=""></image>
						</view>
						<view class="item_tle">
							更多
						</view>
					</view>
				</view>
			</view>
			<view class="dev_state">
				<view class="">
					<zzx-calendar ref="childname" @selected-change="datechange"></zzx-calendar>
				</view>
			</view>

		</view>
		<!-- 主体部分 -->
		<view class="dev_tabs">
			<!-- 信息总览 -->
			<view class="dev_info_item dev_msg">
				<view class="device_con">
					<timelineItem leftTime='08:00' color="#D7F4E6">
						<view class="tripItem" style="background: #D7F4E6;"
							@click="navTo('/pages/maintenance/repair/info')">
							<view class="title">保养 | F100活套部分</view>
							<view class="tips">10:30-11:30</view>
						</view>
						<view class="tripItem" style="background: #FDF1DB;">
							<view class="title">保养 | F100活套部分</view>
							<view class="tips">10:30-11:30</view>
						</view>
					</timelineItem>
					<timelineItem leftTime='09:00' color="#CFECFF">
						<view class="tripItem" style="background: #CFECFF;">
							<view class="title">保养 | F100活套部分</view>
							<view class="tips">10:30-11:30</view>
						</view>
					</timelineItem>
					<timelineItem leftTime='10:00' color="#CFECFF">
						<view class="tripItem" style="background: #CFECFF;">
							<view class="title">保养 | F100活套部分</view>
							<view class="tips">10:30-11:30</view>
						</view>
					</timelineItem>
					<timelineItem leftTime='11:00' color="#D7F4E6">
						<view class="tripItem" style="background: #D7F4E6;">
							<view class="title">保养 | F100活套部分</view>
							<view class="tips">10:30-11:30</view>
						</view>
						<view class="tripItem" style="background: #FDF1DB;">
							<view class="title">保养 | F100活套部分</view>
							<view class="tips">10:30-11:30</view>
						</view>
					</timelineItem>
				</view>
			</view>
		</view>
		<view>
			<u-popup v-model="showMore" mode="bottom">
				<view class="po_pup">
					<view class="pup_intro">
						<view class="intro_img">
							<image src="@/static/device/jianlirenyuanguanli.svg" mode=""></image>
						</view>
						<view class="intro_name">
							<view class="">
								Variable😄
							</view>
							<view class="">
								维修工程师
							</view>
						</view>
					</view>
					<view class="screen">
						筛选
					</view>
					<view class="check_box">
							<u-checkbox-group @change="checkboxGroupChange" wrap="true">
								<u-checkbox 
								
									shape="circle"
									@change="checkboxChange" 
									v-model="item.checked" 
									v-for="(item, index) in list" :key="index" 
									:name="item.name"
								>{{item.name}}</u-checkbox>
							</u-checkbox-group>
						</view>
						<view class="pup_btn">
							提交
						</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import zzxCalendar from "@/components/zzx-calendar/zzx-calendar.vue"
	import timeline from '@/components/chenbin-timeline/timeLine.vue'
	import timelineItem from '@/components/chenbin-timeline/timelineItem.vue'
	export default {
		components: {
			zzxCalendar,
			timeline,
			timelineItem
		},
		data() {
			return {
				plantTitle: '注塑机',
				showMore: false,
				list: [
								{
									name: '保养',
									checked: false,
									disabled: false
								},
								{
									name: '维修',
									checked: false,
									disabled: false
								},
								{
									name: '大修',
									checked: false,
									disabled: false
								},
								{
									name: '换型',
									checked: false,
									disabled: false
								},
								{
									name: '改造',
									checked: false,
									disabled: false
								}
							]
			};
		},
		mounted() {},
		methods: {
			datechange(e) {
				console.log(e);
			},
			changeMode() {
				this.$refs.childname.changeMode();
				console.log('调用子组件方法');
			},
			// 选中某个复选框时，由checkbox时触发
					checkboxChange(e) {
						//console.log(e);
					},
					// 选中任一checkbox时，由checkbox-group触发
					checkboxGroupChange(e) {
						// console.log(e);
					},
					// 全选
					checkedAll() {
						this.list.map(val => {
							val.checked = true;
						})
					}
		}
	}
</script>

<style lang="scss" scoped>
	.po_pup {
		height: 800rpx;
		border-top-left-radius: 48rpx;
		border-top-right-radius: 48rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.screen{
				font-size: 32rpx;
				color: #2E344D;
				font-weight: bold;
				margin: 100rpx 0 40rpx -100rpx;
		}
		.pup_btn{
			background: #D7F4E6;
			color: #6EA289;
			padding: 20rpx 60rpx;
			box-sizing: border-box;
			border-radius: 40rpx;
			margin-top: 50rpx;
		}
		.check_box{
			/deep/ .u-checkbox{
				justify-content: center;
			}
			/deep/ .u-checkbox__label{
				font-size: 28rpx !important;
				color: #2E344D;
				margin-left: 48rpx;
				font-weight: bold;
			}
		}
		.pup_intro {
			display: flex;
			justify-content: center;
			align-items: center;

			.intro_img {
				padding: 10rpx;
				box-sizing: border-box;
				width: 156rpx;
				height: 156rpx;
				margin-left: 12rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.intro_name {
				color: #2E344D;

				view:nth-child(1) {
					font-size: 44rpx;
				}

				view:nth-child(2) {
					font-size: 28rpx;
				}
			}
		}
	}

	@mixin maxIconSize {
		width: 74rpx;
		height: 74rpx;
	}

	@mixin minIconSize {
		width: 40rpx;
		height: 40rpx;
	}

	.icon_item {
		color: #777777;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		justify-content: space-between;
		padding-right: 104rpx;

		image {
			@include minIconSize;
			margin-right: 20rpx;
		}

		view {
			display: flex;
			align-items: center;
		}

		view:nth-child(2) {
			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}
		}
	}

	/deep/ .u-navbar {
		background: #13c296 !important;
		color: #FFFFFF !important;
	}

	/deep/ .u-back-wrap {

		padding: 0 10rpx 0 0 !important;
	}

	.content {
		/deep/ .u-iconfont {
			display: none !important;
		}

		background: #fafafa;
		position: relative;

		.helmet {
			position: fixed;
			width: 100%;
			z-index: 9;
			background: #fff;

			.devices {
				position: relative;
				z-index: 1;
				background: #13c296;
				box-sizing: border-box;
				padding: 0 44rpx 0rpx 44rpx;

				.dev_referral {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 32rpx 0 40rpx 0;

					.ref_item {
						color: #FFFFFF;
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 32rpx;

						image {
							@include minIconSize;
							font-size: blod;
						}

						.item_tle {
							font-size: 24rpx;
							margin: 6rpx 0;
						}
					}

					.ref_line {
						height: 130rpx;
						width: 2rpx;
						background: rgba($color: #ffffff, $alpha: 0.8);
					}
				}
			}

			.dev_state {
				position: relative;
				z-index: 9;
				// margin: -60rpx 44rpx 44rpx 44rpx;
				@include box_shadow;
				border-radius: 24rpx;
				color: $bodyColor;
				background: #ffffff;
				padding: 0rpx 30rpx 30rpx 30rpx;
				box-sizing: border-box;
			}


		}

		.dev_tabs {
			padding: 400rpx 0 0 0;
			position: relative;
			// overflow-y: scroll;
			overflow: hidden;

			.device_con {
				overflow-y: scroll;

				.tripItem {
					height: 140rpx;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
					border-radius: 10px;
					margin-bottom: 30rpx;

					.title {
						font-size: 30rpx;
						font-weight: 500;
						color: #2E344D;
					}

					.tips {
						font-size: 24rpx;
						font-weight: 400;
						color: #45464D;
						margin-top: 20rpx;

					}
				}
			}

			.dev_info_item {
				display: flex;
				flex-direction: column;
				padding-top: 80rpx;
			}

			.dev_msg {}
		}
	}
</style>
